<template>
  <div class="listItem">
    <img :src="defaultValue.imageUrl" alt="" @click="showDetail" />
    <div class="name" @click="showDetail">{{ defaultValue.name }}</div>
    <div class="tip" @click="showDetail" v-if="defaultValue.color">{{ defaultValue.color }}</div>
    <div class="price" @click="showDetail">￥{{ defaultValue.unitPrice }}</div>
    <!-- <div class="num">已售&nbsp;{{defaultValue.num}}&nbsp;件</div> -->
    <div class="cart" @click="addShop">
      <i class="el-icon-shopping-cart-2"></i>
    </div>
    <el-dialog
      title="鲜花详情"
      :visible.sync="centerDialogVisible"
      width="70%"
      center
    >
      <div class="dialogBox">
        <img :src="defaultValue.imageUrl" alt="" />
        <div>
          <div class="name">{{ defaultValue.name }}</div>
          <div class="tip" v-if="defaultValue.color">
            {{ defaultValue.color }}
          </div>
          <div class="price">￥{{ defaultValue.unitPrice }}</div>
          <div class="cart" @click="addShop">
            <i class="el-icon-shopping-cart-2"></i>
          </div>
          <div>描述：{{defaultValue.detail}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addShopping } from "@/api/order";
export default {
  props: {
    defaultValue: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      centerDialogVisible: false,
    };
  },
  methods: {
    addShop() {
      let params = {
        customerId: this.$store.getters.userInfo.id,
        flowerId: this.defaultValue.id,
        size: 1,
        shopping: true,
      };
      addShopping(params)
        .then((res) => {
          this.$message.success(res.msg || "成功加入购物车");
        })
        .catch((err) => {
          this.$message.warning(res.msg || "操作失败");
        });
    },
    showDetail() {
      this.centerDialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.listItem {
  width: 14vw;
  height: 339px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  position: relative;
  margin-right: 15px;
  cursor: pointer;
  img {
    height: 230px;
    width: 100%;
  }
  div {
    padding: 5px 10px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .name {
    width: calc(100% - 20px);
  }
  .tip {
    color: #ff734c;
    border: 1px solid #ff734c;
    display: inline-block;
    padding: 0 10px;
    margin-top: 4px;
    background: #fff0ec;
    border-radius: 20px;
  }
  .price {
    font-weight: bold;
  }
  .num {
    font-size: 12px;
  }
  .cart {
    font-size: 2em;
    position: absolute;
    right: 5px;
    color: #ff734c;
    bottom: 5px;
    cursor: pointer;
  }
}
.dialogBox {
  img {
    height: 50vh;
  }
}

</style>
